<template>
  <div>
    <common-head title="订单页" />
    <div class="order-main">
      <van-contact-card
        :type="cardType"
        :name="currentOrder.contact.name"
        :tel="currentOrder.contact.tel"
        @click="chooseContact"
      />
    </div>
    <div class="items">
       <van-card
        v-for= 'item in currentOrder.items'
        :key="item.id"
        :num="item.num"
        :price="item.minPrice"
        :title="item.name"
        :thumb="item.pic"
        >
      </van-card>
    </div>
    <van-submit-bar :price="currentOrder.total*100" button-text="提交订单" @submit="onSubmit" />
  </div>
</template>

<script>
import CommonHead from '@/components/CommonHead'
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      cardType: 'add'
    }
  },
  created () {
    this.initContact()
  },
  methods: {
    initContact () {
      // 订单联系人
      /* 1、联系人列表中，一条数据没有，编辑方式“add”
      2、如果有，｛
      1、设置默认，｝
      */
      if (this.currentOrder.contact.name) {
        this.cardType = 'edit'
        return
      }
      if (this.contacts.length === 0) {
        this.cardType = 'add'
        return
      }
      this.cardType = 'edit'
      // 这里的currentContact只是一个名字，用作判断
      let currentContact = this.contacts.find(contact => contact.isDefault)
      if (!currentContact) {
        currentContact = this.contacts[0]
      }
      // 这里赋值完之后传参，注意
      this.setOrderContact(currentContact)
    },
    onSubmit () {
      alert('请先填写联系人')
    },
    chooseContact () {
      if (this.cardType === 'add') {
        this.$router.push('/addContact')
      } else {
        this.$router.push('/addressLists')
      }
    },
    ...mapMutations(['setOrderContact'])
  },
  computed: {
    ...mapState(['currentOrder', 'contacts'])
  },
  components: {
    CommonHead
  }
}
</script>

<style lang="scss" scoped>
.order-main{
  margin-top: 46px;
}
</style>
